<html>
    <style>
        .top-menu{
            position: absolute;
            width: 300dip;
            top: 0;
            left: 0;
            padding: 0;
            margin: 0;
        }
        ul.menubar{
            width:  300dip;
            background-color : #cccccc;            
            padding: 0  4px;   
            margin: 0;        
        }
        ul.menubar > li {
            display: inline-block;
            color: #666666;
            padding: 0 5px;   
            margin: 0 5px;   
            position: relative;
        }
        ul.menubar > li:hover {
            color: #cccccc;
            background: #666666;                         
        }    

        ul.sub-menu {
            position: absolute;
            display: none;
            top: 16dip;
            left: 0;
            width: auto;
            height: auto;
            list-style: none;
            margin: 0;
            padding: 0;
            box-shadow:  2dip 2dip 2dip rgba(100,100,100,0.6)
        }     
        ul.sub-menu > li {
            padding: 2dip;
            border-bottom:  2px dotted #cccccc;
            color: #333333;
        }
        ul.menubar > li:hover > ul.sub-menu {                          
            display:block;
            background: #fff;           
        }     
        textarea{  
            position: absolute;
            top:16dip;
            left:0dip;      
            width: 295dip;      
            font-size: 14dip;     
            background:antiquewhite;
            border: none;           
            overflow-y: auto;
        }
    </style>
    <body>       
        
        <!-- Textarea to get input from user-->
        <textarea cols="48" rows="24" #data></textarea>        

        <!-- Simulating Menubar for notepad -->
        <div class="top-menu">            
            <ul class="menubar">
                <li>
                    File
                    <ul class="sub-menu">
                        <li #new>New</li>
                        <li #open>Open</li>
                        <li #save>Save</li>
                        <li #exit>Exit</li>
                    </ul>
                </li>                
            </ul>
        </div>   

        <script type="text/tiscript">
        
            event click $(#exit){
                view.closeWindow()
            }
        
            event click $(#open){
                const HTML_FILES = "Notepad Plus Minus (*.nppm)|*.nppm";    
                var filepath = view.selectFile(#open, HTML_FILES , "Unnamed", "file", "File name to save:");
                // incase of  file was not selected then
                // function returns null
                if (filepath){
                    self#data.text = view.open(filepath)  
                }
            }

            event click $(#save){
                const HTML_FILES = "Notepad Plus Minus (*.nppm)|*.nppm";              
                var filepath = view.selectFile(#save, HTML_FILES , "Unnamed", "file", "File name to save:");
                view.save(filepath,self#data.text)           
            }
        
            event click $(#new){
                self#data.text = ""
            }
        
        </script>

    </body>
</html>